<template>
  <div class="manageContent">
    <SelfTitle :userName="username"></SelfTitle>
    <!-- 企业用户 -->
    <div class="tableBox">
      <el-table
        border
        :data="allShowInfo"
        style="width: 100%"
        :header-cell-style="{
          background: '#E9E9E9',
          color: '#606266',
          fontWeight: 600,
        }"
      >
        <el-table-column label="序号" width="50" type="index" align="center">
        </el-table-column>
        <el-table-column label="需求名称" width="100" align="center">
          <template slot-scope="scope">
            <div>
              {{ scope.row.demandName }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="demandDescribe" label="需求描述" align="center">
          <template slot-scope="scope">
            <div class="reqDesc">{{ scope.row.demandDescribe }}</div>
          </template>
        </el-table-column>

        <el-table-column label="需求文档" width="100" align="center">
          <template slot-scope="scope">
               <a
                  v-if="scope.row.docFilesUrl !== undefined || null"
                  :href="scope.row.docFilesUrl"
                  class="textUpload"
                  >点击下载</a
                >
                <div v-else>文件暂缺</div>
          </template>
        </el-table-column>

        <el-table-column
          prop="enterpriseName"
          label="所属企业"
          width="120"
          align="center"
        >
        </el-table-column>

        <el-table-column
          prop="relation"
          label="需求分类"
          align="center"
          width="150"
        >
        </el-table-column>

        <el-table-column
          prop="projectName"
          label="项目名称"
          align="center"
          width="120"
        >
          <template slot-scope="scope">
            <div>
              {{ scope.row.projectName }}
            </div>
          </template>
        </el-table-column>

        <el-table-column
          prop="gmtCreated"
          label="创建时间"
          align="center"
          width="160"
        >
          <template slot-scope="scope">
            <div>
              {{ scope.row.gmtCreated }}
            </div>
          </template>
        </el-table-column>

        <el-table-column
          prop="contact"
          label="联系方式"
          width="140"
          align="center"
        >
        </el-table-column>

        <el-table-column
          prop="docFilesUrl"
          label="已发送文件"
          width="100"
          align="center"
        >
          <template slot-scope="scope">
            <div>
              <a :href="scope.row.docFilesUrl" class="textUpload" v-if="scope.row.docFilesUrl" >点击下载</a>
              <div v-else>暂无文件</div>
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="status" label="状态" width="100" align="center">
          <template slot-scope="scope">
            <div>
              <div v-if="scope.row.status===0">未处理</div>
              <div v-if="scope.row.status===1">处理中</div>
              <div v-if="scope.row.status===2">处理完成</div>
              <div v-if="scope.row.status===3">需求关闭</div>
            </div>
          </template>
        </el-table-column>

        <el-table-column
          prop="assess"
          label="项目评分"
          width="120"
          align="center"
        >
          <template>
            <div class="reqAllAssess">
              <i class="el-icon-remove-outline"></i>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 人员分配 -->
    <div class="person-assign">
      <h3>人员分配 <i class="el-icon-s-promotion"></i></h3>
      <div class="person-assign-box">
        <div
          class="person-assign-item"
          v-for="(item, index) in assignList"
          :key="'personAss' + index"
        >
          <h4>{{ item[0] }}</h4>
          <span v-for="(it, index) in item[1]" :key="'child' + index">{{
            it.name
          }}</span>
        </div>
      </div>
    </div>

    <!-- 评论 -->
    <div class="comment-content">
      <h3>评论<div class="fileUpload">
          <el-upload
            class="upload-demo"
            action="http://112.124.67.43:8088/iot/comment/fileUpload"
            :on-change="handleChange"
            :on-success="successEvent"
            :file-list="fileList"
            :limit="1"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              请上传文件,如果多个附件请上传压缩文件
            </div>
          </el-upload>
        </div> </h3>
      <div class="firstCommentBox">
        <el-avatar :size="50" :src="circleUrl"></el-avatar>
        <el-input
          v-model="firstComment"
          placeholder="请输入评论内容..."
        ></el-input>
        <el-button type="primary" @click="commentFirst">评论</el-button>
      </div>
      <div v-if="firstCommentList.length === 0">
        <el-empty description="暂无评论"></el-empty>
      </div>
      <div v-else style="margin-top: 20px;">
        <div
          v-for="(item, index) in firstCommentList"
          :key="index"
          class="commentItemBox"
        >
          <CommentItem :comment="item" @callbackto="callback"></CommentItem>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import SelfTitle from "@/components/SelfTitle.vue";
import CommentItem from "../../../components/CommentItem.vue";
import {
  ReqDemandDetailInfoById,
  ReqEnterPriseUser,
  ReqPersonByProjectId,
  ReqCommentParent,
  ReqCommentCallBackById,
  ReqAddComment,
} from "../../../request";
export default {
  data() {
    return {
      username:'',
      tableData: [],
      assignList: [],
      allShowInfo: [],
      enterPriseUser: [],
      userDetailInfo: "",
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      firstComment: "",
      firstCommentList: [],
      textarea: "",
      // 文件列表
      fileList:[],
      // 上传成功地址
      commentFileUrl:''
    };
  },
  components: {
    SelfTitle,
    CommentItem,
  },
  methods: {
    deleteManageUser(data) {},
    async getDemandById() {
      const query = this.$router.history.current.query;
      console.log(query);
      const resultData = await ReqDemandDetailInfoById({ id: query.demandId });
      console.log(resultData,"需求状态")
      const { demandVo } = resultData;
      this.allShowInfo.push({
        demandId: demandVo.demand?.id,
        demandName: demandVo.demand?.demandName,
        demandDescribe: demandVo.demand?.demandDescribe,
        docReqFilesUrl: demandVo.demand?.docFilesUrl,
        relation: demandVo.relation.value,
        projectName: demandVo.project?.projectName,
        gmtCreated: demandVo.project?.gmtCreated,
        contact: demandVo.project?.contact,
        docFilesUrl: demandVo.project?.docFilesUrl,
        status: demandVo.demand?.status,
        gmtCreated:demandVo.demand.gmtCreated,
        enterpriseName:demandVo?.enterpriseUserEntity?.enterpriseName
      });
    },
    async getAllEnterPriseUser() {
      let resultData = await ReqEnterPriseUser();
      const {
        page: { list },
      } = resultData;
      this.enterPriseUser = list;
    },
    // 获取该项目全部的人
    async getAllPersonInfo() {
      const query = this.$router.history.current.query;
      const allPerson = await ReqPersonByProjectId({
        projectId: query.projectId,
      });
      const { scoreVo } = allPerson;
      let map = new Map();
      scoreVo.forEach((item) => {
        if (!map.has(item.position)) {
          map.set(item.position, [item]);
        } else {
          map.get(item.position).push(item);
        }
      });
      this.assignList = Array.from(map);
    },
    // 获取一级评论
    async getFirstComment() {
      const query = this.$router.history.current.query;
      const resultData = await ReqCommentParent({
        demandId: query.demandId,
        limit: 1000,
        page: 1,
      });
      const {
        remarks: { list },
      } = resultData;
      this.firstCommentList = list;
      // 拿到一级评论后,进行遍历循环获取用户信息
      this.firstCommentList.forEach((item) => {
        item.isCallBack = false;
      });
      console.log(this.firstCommentList);
    },
    // 点击回复
    callback(commentId) {
      console.log("点击回复，回复的评论id")
      this.firstCommentList.forEach((item) => {
        if (item.commentEntity.id === commentId) {
          item.isCallBack = true;
        } else {
          item.isCallBack = false;
        }
      });
      this.set = Math.random();
    },
    // 取消评论
    commentCancel() {
      this.firstCommentList.forEach((item) => {
        item.isCallBack = false;
      });
      this.set = Math.random();
    },
    // 查看更多回复
    async seeMoreCallBack(id) {
      const resultData = await ReqCommentCallBackById({ commentId: id });
      const { remarks } = resultData;
      console.log(remarks);
      // 将数据加到全部的评论数据中
      this.firstCommentList.forEach((item) => {
        if (item.commentEntity.id === id) {
          item.children = remarks;
        }
      });
      console.log(this.firstCommentList);
    },

    async commentFirst() {
      if (this.firstComment.trim().length === 0) {
        this.$message({
          type: "warning",
          message: "请输入内容",
        });
      } else {
        // let formdata = new FormData();
        // formdata.append("contend", this.firstComment.trim());
        // formdata.append("demandId", this.$router.history.current.query.demandId);
        // formdata.append("parentId", 0);
        // formdata.append("pusherId",sessionStorage.getItem("id"));
        let formdata={
          docFilesUrl: this.commentFileUrl,
          commentContent:this.firstComment.trim(),
          demandId:this.$router.history.current.query.demandId,
          parentId:0,
          pushlisherId:sessionStorage.getItem("id")
        }
        const resultData = await ReqAddComment(formdata)
        if(resultData.msg=="success"){
           this.$message({
          type:"success",
          message: '评论成功'
        })
        this.firstComment =''
        this.fileList =[]
        this.getFirstComment()
        }
      }
    },
    // 对文件列表操作
    handleChange(file, fileList) {
      this.fileList = fileList.slice(-3);
    },
     // 文件上传成功时
    successEvent(response, file, fileList) {
      this.commentFileUrl = response.msg;
    },
  },
  async created() {
    let userType = sessionStorage.getItem('userType')
    this.username = userType ==13?"超级管理用户":"管理用户"
    await this.getDemandById();
    await this.getAllEnterPriseUser();
    await this.getAllPersonInfo();
    await this.getFirstComment();
  },
};
</script>

<style scoped>
@import url("~@/assets/styles/manage/user.css");
.reqDesc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reqAllAssess {
  font-size: 20px;
  cursor: pointer;
}
.textUpload {
  text-decoration: none;
  color: black;
}
.manageSearch .box > :nth-child(n) {
  width: 45%;
  margin-right: 10px;
}
.person-assign {
  border: 2px solid #eee;
  padding: 20px;
}
.person-assign h3 {
  font-weight: 600;
}
.person-assign-box {
  margin-top: 15px;
}
.person-assign-item {
  height: 30px;
  display: flex;
}
.person-assign-item h4 {
  font-weight: 600;
  width: 100px;
  text-align: right;
  margin-right: 40px;
}
.person-assign-item span {
  margin-right: 30px;
}
.comment-content {
  margin-top: 20px;
  box-shadow: 0px 0px 5px #ccc;
  padding: 40px;
}
.comment-content h3 {
  font-size: 18px;
  font-weight: 600;
  padding: 20px;
}

.firstCommentBox {
  display: flex;
  align-items: center;
}
.firstCommentBox .el-avatar {
  margin-left: 20px;
}
.firstCommentBox :nth-child(n) {
  margin-right: 10px;
}
.firstCommentBox .el-input {
  width: 80%;
}
.userBaseInfo {
  display: flex;
  align-items: center;
}
.userBaseInfo :nth-child(n) {
  margin-right: 10px;
}
.userBaseInfo :nth-child(2) {
  color: #f0ab00;
}
.userBaseInfo :nth-child(3) {
  color: #aaa;
  font-size: 12px;
}
.commentContent {
  padding: 0px 50px;
  line-height: 30px;
}
.commentContent .callback {
  margin-left: 30px;
  color: #f0ab00;
  font-size: 12px;
  padding: 0px 10px;
  cursor: pointer;
}
.commentBtnStyle {
  width: 80%;
  position: relative;
  margin: 30px 0px;
}
.commentBtnStyle .el-button {
  position: absolute;
}
.commentBtnStyle .commentBtnOne {
  right: 80px;
}
.commentBtnStyle .commentCancel {
  right: 10px;
}
.commentItemBox {
  margin: 10px;
}
.seeMoreCallBackStyle {
  font-size: 12px;
  color: #ccc;
  cursor: pointer;
}
</style>
